<template>
  <div>
    <el-button type="primary" @click="handleAdd">添加</el-button>
  </div>
  <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%">
    <el-table-column type="selection" width="55" />

    <el-table-column property="id" label="ID" />
    <el-table-column property="name" label="标题" />

    <el-table-column label="图片">
      <template #default="scope">
        <img :src="scope.row.imageUrl" style="width: 120px; height: 60px; object-fit: cover" />
      </template>
    </el-table-column>

    <el-table-column property="count" label="排序" />

    <el-table-column label="启用状态">
      <template #default="scope">
        <el-switch v-model="value2" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <span @click="handleEdit(scope.row)"><el-icon>
                            <EditPen />
                        </el-icon>编辑</span>
                    <span @click="handleDelete(scope.row)"><el-icon>
                            <Delete />
                        </el-icon>删除</span>
      </template>
    </el-table-column>

  </el-table>
<Dialog ref="child" :tableData="tableData"></Dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Dialog from '@/guanggaodialog/Dialog.vue'

import type { TableInstance } from 'element-plus'
const value2 = ref(true)
// 弹框
const child = ref('')


// const multipleTableRef = ref<TableInstance>()
// const multipleSelection = ref<User[]>([])


const tableData = [
  {
    id: 769,
    name: '巧克力 与众不同的味道',
    imageUrl: '/img/1.jpg',
    count: 1
  },
  {
    id: 770,
    name: '登录logo',
    imageUrl: '/img/3.jpg',
    count: 1
  },
  {
    id: 776,
    name: '良品铺子',
    imageUrl: '/img/8.jpg',
    count: 4
  },
  {
    id: 779,
    name: '三只松鼠',
    imageUrl: '/img/5.jpg',
    count: 1
  },
  {
    id: 777,
    name: '喜之郎果冻',
    imageUrl: '/img/1.jpg',
    count: 2
  },
  {
    id: 778,
    name: '士力架',
    imageUrl: '/img/3.jpg',
    count: 4
  },
  {
    id: 780,
    name: '才感到翻跟斗',
    imageUrl: '/img/5.jpg',
    count: 10
  },
  {
    id: 775,
    name: '中国的辣条，世界的味道',
    imageUrl: '/img/8.jpg',
    count: 1
  },
]

const handleAdd = (row:any)=>{
  child.value.showDialog(row,'添加')
}
// 编辑
const handleEdit = (row: any) => {
    console.log(row)
    child.value.showDialog(row, '编辑')
}
// 删除
const handleDelete = (row: any) => {
    console.log(row)
}
</script>


<style lang='less' scoped></style>